import {FC, useCallback, useEffect, useState} from "react";
import {Modal, ModalProps} from "antd";
import {CloseOutlined,RedoOutlined} from "@ant-design/icons";
import {UserProfile} from "@/apis/recommend";
import {getRandomNode, NodeNameEnum} from "@/apis/knowledgeGraph";
import {warnMessage} from "@/common/components/Message";
import "./index.scss"

interface Props extends ModalProps {
    getLikeData: (likeData: UserProfile) => void
}

interface NodeConfig {
    id: string | number
    type: NodeNameEnum
    name: string
}

export const SelectLike: FC<Props> = (props) => {
    const {open, getLikeData} = props
    const [nodeList, setNodeList] = useState<NodeConfig[]>([])
    const [isSelectNodeList, setIsSelectNodeList] = useState<NodeConfig[]>([])


    const handleOk = () => {
        if(isSelectNodeList.length <= 2) return warnMessage("至少选择3个标签")
        const tempObj:UserProfile = {authors:[],labels:[],types:[]}
        isSelectNodeList.forEach(item => {
            const {type,name} = item
            switch (type){
                case NodeNameEnum.AUTHOR:
                    tempObj.authors.push(name)
                    break
                case NodeNameEnum.LABEL:
                    tempObj.labels.push(name)
                    break
                case NodeNameEnum.TYPE:
                    tempObj.types.push(name)
                    break
            }
        })
        getLikeData(tempObj)
    }

    const generateNodeConfigList = (nodeList: any[], type: NodeNameEnum): NodeConfig[] => {
        return nodeList.map(item => ({
            name: item['name'],
            id: item['elementId'],
            type
        }))
    }

    const selectNode = (item: NodeConfig) => {
        setIsSelectNodeList(isSelectNodeList.concat(item))
        const index = nodeList.indexOf(item)
        nodeList.splice(index, 1)
        setNodeList(nodeList)
    }

    const cancelSelectNode = (item: NodeConfig) => {
        setNodeList(nodeList.concat(item))
        const index = isSelectNodeList.indexOf(item)
        isSelectNodeList.splice(index, 1)
        setIsSelectNodeList(isSelectNodeList)
    }

    const loadData = useCallback(async () => {
        const authors = await getRandomNode(NodeNameEnum.AUTHOR, 10)
        const labels = await getRandomNode(NodeNameEnum.LABEL, 10)
        const types = await getRandomNode(NodeNameEnum.TYPE, 10)
        setNodeList([
            ...generateNodeConfigList(authors.data, NodeNameEnum.AUTHOR),
            ...generateNodeConfigList(labels.data, NodeNameEnum.LABEL),
            ...generateNodeConfigList(types.data, NodeNameEnum.TYPE)
        ].sort(() => 0.5 - Math.random()))
    },[])

    useEffect(() => {

        loadData().then()

    }, [loadData])

    return (
        <>
            <Modal title="请选择您的喜好"
                   {...props}
                   width={900}
                   open={open}
                   onOk={handleOk}
                   onCancel={handleOk}
                   maskClosable={false}>
                <div className="labels">
                    {
                        isSelectNodeList?.map(item =>
                            <span className="label label_select"
                                  onClick={() => {
                                      cancelSelectNode(item)
                                  }}
                                  key={item.id}>{item.name}
                                <CloseOutlined/>
                            </span>)
                    }
                </div>
                <hr/>
                <p className="refresh" onClick={loadData}>换一批<RedoOutlined /></p>
                <div className="labels">
                    {
                        nodeList?.map((item, index) =>
                            <span className="label"
                                  onClick={() => {
                                      selectNode(item)
                                  }}
                                  key={item.id}>{item.name}</span>)
                    }
                </div>
            </Modal>
        </>
    )
}
